import { Component, PropsWithChildren } from 'react'
import { View, Text, Input, Image, Button } from '@tarojs/components'
import { AtTabs, AtTabsPane, AtIcon} from 'taro-ui'
import { getArea, getAddress, getStation } from '../../api/home'
import './index.scss'
import Taro from '@tarojs/taro'

export default class Index extends Component<PropsWithChildren> {
  state: any
  constructor(props) {
    super(props)
    this.state = {
      current: 0,
      current1: 1,
      current2: 3,
      current3: 5,
      areaList: [],
      addressList: [],
      stationList: [],
      address: '北京'
    }
  }
  componentWillMount() { }

  componentDidMount() {
    this.getAreaList()
    this.getAddressList()
    this.getStationList()
  }

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }

  getAreaList() {
    getArea().then((res) => {
      this.setState({
        areaList: res.data.data
      })
    })
  }
  getAddressList() {
    getAddress().then((res) => {
      this.setState({
        addressList: res.data.data
      })
    })
  }
  getStationList() {
    getStation().then((res) => {
      this.setState({
        stationList: res.data.data
      })
    })
  }
  onClick() {
    Taro.switchTab({
      url: '/pages/index/index'
    })
  }
  handleClick(index: number) {
    if (index === 0) {
      Taro.navigateTo({
        url: '/pages/Region/index'
      })
    } else if (index === 1) {
      Taro.navigateTo({
        url: '/pages/Price/index'
      })
    } else if (index === 2) {
      Taro.navigateTo({
        url: '/pages/HouseType/index'
      })
    } else if (index === 3) {
      Taro.navigateTo({
        url: '/pages/Filter/index'
      })
    } else {

    }
  }
  handleClick1(index: number) {
    this.setState({
      current1: index
    })
  }
  handleClick2(index: number,) {
    let title = this.state.addressList.title
    this.setState({
      current2: index,
      address: title
    })
  }
  handleClick3(index: number) {
    this.setState({
      current3: index
    })
  }
  render() {
    const tabList = [{ title: '区域  ▼' }, { title: '价格  ▼' }, { title: '户型  ▼' }, { title: '筛选  ▼' }, { title: '↿⇂' }]
    return (
      <View className='index'>
        <View className='nav-bar-box'>
          <View className='status-bar'></View>
          <View className='title-bar'>
            <AtIcon onClick={this.onClick.bind(this)} className='icon' value='chevron-left' size='24' color='#fff'></AtIcon>
            <Text className='tit'>区域筛选</Text>
          </View>
        </View>
        <View className='contains'>
          <View className='address'>
            <View>{this.state.address} ▼</View>
            <Input placeholder='请在这里输入区域/商圈' />
            <AtIcon className='search' value='search' size='20' color='#ccc'></AtIcon>
            <View>地图找房</View>
          </View>
          <View className='sort'>
            <AtTabs current={this.state.current} tabList={tabList} onClick={this.handleClick.bind(this)}>
              {/* <AtTabsPane current={0} index={0}>
              </AtTabsPane>
              <AtTabsPane current={1} index={1}>
              </AtTabsPane>
              <AtTabsPane current={2} index={2}>
              </AtTabsPane>
              <AtTabsPane current={3} index={3}>
              </AtTabsPane> */}
            </AtTabs>
          </View>
          <View className='area'>
            <View className='left'>
              {
                this.state.areaList?.map((item: any, index: number) => {
                  return <AtTabs className='tab'
                    key={index}
                    current={this.state.current1}
                    scroll
                    height='100%'
                    tabDirection='vertical'
                    tabList={[
                      { title: item.area1 },
                      { title: item.area2 },
                      { title: item.area3 }
                    ]}
                    onClick={this.handleClick1.bind(this)}>
                    <AtTabsPane current={this.state.current1} index={0}>
                    </AtTabsPane>
                    <AtTabsPane current={this.state.current1} index={1}>
                    </AtTabsPane>
                    <AtTabsPane current={this.state.current1} index={2}>
                    </AtTabsPane>
                  </AtTabs>
                })
              }
            </View>
            <View className='center'>
              {
                this.state.addressList?.map((item: any, index: number) => {
                  return <AtTabs className='tab'
                    key={index}
                    current={this.state.current2}
                    scroll
                    height='100%'
                    tabDirection='vertical'
                    tabList={[
                      { title: item.address },
                      { title: item.address1 },
                      { title: item.address2 },
                      { title: item.address3 },
                      { title: item.address4 },
                      { title: item.address5 },
                      { title: item.address6 },
                      { title: item.address7 },
                      { title: item.address8 },
                      { title: item.address9 },
                      { title: item.address10 },
                      { title: item.address11 },
                      { title: item.address12 }
                    ]}
                    onClick={this.handleClick2.bind(this)}>
                  </AtTabs>
                })
              }
            </View>
            <View className='right'>
              {
                this.state.stationList?.map((item: any, index: number) => {
                  return <AtTabs className='tab'
                    key={index}
                    current={this.state.current2}
                    scroll
                    height='100%'
                    tabDirection='vertical'
                    tabList={[
                      { title: item.station },
                      { title: item.station1 },
                      { title: item.station2 },
                      { title: item.station3 },
                      { title: item.station4 },
                      { title: item.station5 },
                      { title: item.station6 },
                      { title: item.station7 },
                      { title: item.station8 },
                      { title: item.station9 },
                      { title: item.station10 },
                      { title: item.station11 },
                      { title: item.station12 }
                    ]}
                    onClick={this.handleClick2.bind(this)}>
                  </AtTabs>
                })
              }
            </View>
          </View>
          <Button className='Btn'>确定</Button>
        </View>
      </View>
    )
  }
}

// https://img1.baidu.com/it/u=1342130754,306943470&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500
// https://img0.baidu.com/it/u=3295534422,3155222370&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334
// https://img1.baidu.com/it/u=2064254833,770634332&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500
// https://img1.baidu.com/it/u=1144874046,3925078084&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=375
// https://img2.baidu.com/it/u=3849720705,1881524056&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334
// https://img0.baidu.com/it/u=1649151030,2162866999&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500
// https://img1.baidu.com/it/u=1993417918,2447354163&fm=253&fmt=auto&app=120&f=JPEG?w=641&h=394